<template>
  <div class="doctor-schedule">
    <div class="dashboard-header">
      <h2>值班排班</h2>
      <div class="header-actions">
        <el-date-picker
          v-model="scheduleDate"
          type="month"
          placeholder="选择月份"
          size="large"
        />
        <el-button type="primary" icon="Refresh">刷新</el-button>
      </div>
    </div>
    
    <el-calendar>
      <template #dateCell="{ data }">
        <div class="calendar-day">
          <div class="day-header">{{ data.day.split('-')[2] }}</div>
          <div v-if="getScheduleForDate(data.day)" class="schedule-info">
            <div class="schedule-item" v-for="(item, index) in getScheduleForDate(data.day)" :key="index">
              <el-tag :type="item.type === '值班' ? 'danger' : 'success'" size="small">
                {{ item.type }}
              </el-tag>
              <span class="time">{{ item.time }}</span>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const scheduleDate = ref(new Date())
    
    const schedules = ref({
      '2023-07-21': [
        { type: '值班', time: '08:00-12:00' },
        { type: '门诊', time: '14:00-18:00' }
      ],
      '2023-07-22': [
        { type: '手术', time: '09:00-12:00' }
      ],
      '2023-07-25': [
        { type: '值班', time: '全天' }
      ]
    })
    
    const getScheduleForDate = (date) => {
      return schedules.value[date]
    }
    
    return {
      scheduleDate,
      getScheduleForDate
    }
  }
}
</script>

<style scoped>
.doctor-schedule {
  padding: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.calendar-day {
  height: 100%;
  padding: 8px;
}

.day-header {
  font-weight: bold;
  margin-bottom: 5px;
}

.schedule-item {
  display: flex;
  align-items: center;
  margin-top: 3px;
}

.schedule-item .el-tag {
  margin-right: 5px;
}

.time {
  font-size: 12px;
  color: #666;
}
</style>
